<template>
  <BaseDialog v-model="dialogVisible" :title="title" width="850px" :before-close="handleClose">
    <el-form ref="refDialogForm" v-loading="formLoading" class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '100px'" :model="formItem" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.supplierName')" prop="name">
            <TextInput v-model="formItem.name" clearable :label="$t('supplier.supplierName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.status')" prop="status">
            <el-select v-model="formItem.status" :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('supplier.status')
                )
              ">
              <el-option v-for="item in g_options.statusOptions" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.category')" prop="type">
            <el-select v-model="formItem.type" :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('supplier.category')
                )
              ">
              <el-option v-for="item in g_options.costItemTypeOptions" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.costNum')" prop="costNum">
            <TextInput v-model="formItem.costNum" clearable :label="$t('supplier.costNum')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.province')" prop="province">
            <TextInput v-model="formItem.province" clearable :label="$t('supplier.province')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.city')" prop="city">
            <TextInput v-model="formItem.city" clearable :label="$t('supplier.city')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.auditStatus')" prop="auditStatus">
            <el-select v-model="formItem.auditStatus" :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('supplier.auditStatus')
                )
              ">
              <el-option v-for="item in g_options.auditStatusOptions" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.leader')" prop="leader">
            <TextInput v-model="formItem.leader" clearable :label="$t('supplier.leader')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.mobile')" prop="mobile">
            <TextInput v-model="formItem.mobile" clearable :label="$t('supplier.mobile')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('supplier.remark')" prop="remark">
            <TextInput v-model="formItem.remark" :label="$t('supplier.remark')" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
          }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
          }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  row: {
    type: Object,
    default: {}
  },
  type: {
    type: String,
    default: "add"
  },
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const title = computed(() =>
  props.type === 'add' ? g_t('public.create') : g_t('public.edit')
)

const refDialogForm = ref(null)
const formLoading = ref(false)
const formItem = ref({
  "name": "",//供应商名称
  "costNum": "",//成本数
  "status": "",//状态 1-正常，2-锁定
  "auditStatus": "",//审核状态 1-待审核，2-已审核，3-已拒绝
  "leader": "",//负责人
  "mobile": "",//	手机号码
  "province": "",//省份
  "city": "",//城市
  "remark": "",//备注
  "type": '',//类别
})
const rules = {
  name: g_rules.commonInputText(g_t('supplier.supplierName')),
  type: g_rules.selectRule(g_t('supplier.category')),
}

onMounted(() => {
  props.type === 'edit' && getFormData()
})

const getFormData = () => {
  nextTick(() => {
    formItem.value = props.row
  })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.travelAgency.apiSupplierCreate
        : g_api.travelAgency.apiSupplierUpdate
    urlMethod(formItem.value)
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
